<template>
<div relative pd1 bd-gray4 h6 linkable @click="handleClick">
    <p gray2>
        <span>{{address.personName}}</span>
        <span right>{{address.phoneNumber}}</span>
    </p>
    <p gray2>{{address.province}} {{address.city}} {{address.county}} {{address.detailedAddress}}</p>
    <p abs-bottom sz0 blue>
        <span v-if="!address.isDefault" linkable @click="handleSetDefault">设为默认</span>
        <span pdx1 linkable @click="showUpdateAddressModal=true">修改</span>
        <span pdx1 linkable @click="handleDelete">删除</span>
    </p>
    <update-address v-model="showUpdateAddressModal" :address="address" @save-success="handleUpdate"></update-address>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase';
import UpdateAddress from './update-address.vue'

@Component({
    components: { UpdateAddress }
})
export default class AddressCard extends AbpBase{
    @Prop({type:Object}) value:any;
    showUpdateAddressModal:Boolean = false;
    get address():any {
        return this.value;
    }
	async handleSetDefault(){
        await this.post("MemberShippingAddress/SetDefault", this.address);
        this.$emit("on-update");
	}
	async handleUpdate(){
        this.$emit("on-update");
	}
	async handleDelete(){
        this.confirm('确认删除该地址吗？删除后不可恢复！', async () => {
            await this.post('MemberShippingAddress/Delete', this.address);
            this.$emit("on-update");
        })
    }
    handleClick(){
        this.$emit("on-click");
    }
	async created(){
        
	}
}
</script>